<?php get_instance()->view('common/header');?>
<style type="text/css">
    .delete{position: relative;top: -28px;right: -20px;float: right;}
    .val-div{margin-bottom: 5px;}
</style>
<div class="page-container home">
    <?php get_instance()->view('common/sidebar');?>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title"> <?php echo $title . ' - ' .$info['name']; ?> </h3>
                    <ul class="page-breadcrumb breadcrumb">
                        <li class="btn-group"> <a class="btn default ml_5 return" href="<?php echo getUrl('find/attribute');?>"><i class="fa fa-chevron-left"></i> 返回</a> </li>
                        <li> <i class="fa fa-home"></i> <a href="<?php echo  getUrl('find/attribute');?>"> 特殊属性分类  <i class="fa fa-angle-right"></i> </a></li>
                        <li><a href="javascript:void(0);"><?php echo $title ?> </a></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet">
                        <div class="portlet-body">
                            <div class="table-container">
                                <div class="table-actions-wrapper"> <span> </span>
                                    <a class="btn btn-sm blue add" href="javascript:"><i class="fa fa-plus"></i> 新增</a>
                                </div>
                                <table class="table table-bordered table-hover" id="datatable">
                                    <thead>
                                    <tr role="row" class="heading">
                                        <th> 属性名称 </th>
                                        <th sort="false">类型</th>
                                        <th sort="false">类型值</th>
                                        <th width="100px" sort="false">添加时间</th>
                                        <th width="150px" sort="false">操作</th>
                                    </tr>
                                    <tr>
<!--                                        <th>-->
<!--                                            <select class="form-control form-filter input-sm category_id" name="type">-->
<!--                                                <option value="" selected="selected">所有</option>-->
<!--                                                --><?php //foreach ($category as $k => $v):?>
<!--                                                    <option value="--><?php //echo $v['id']?><!--" selected>--><?php //echo $v['name']?><!--</option>-->
<!--                                                --><?php //endforeach;?>
<!--                                            </select>-->
<!--                                        </th>-->
                                        <th><input class="form-control form-filter input-sm" name="attr_name" type="text"></th>
                                        <th>
                                            <select name="attr_input_type" class="form-control form-filter input-sm">
                                                <option value="" selected="selected">所有</option>
                                                <?php foreach ($type as $k => $v):?>
                                                    <option value="<?php echo $k?>" ><?php echo $v?></option>
                                                <?php endforeach;?>
                                            </select>
                                        </th>
                                        <th></th>
                                        <th>
                                            <div class="margin-bottom-5">
                                                <input class="form-control form-filter input-sm" name="send_date_from" dp placeholder="从" type="text">
                                            </div>
                                            <input class="form-control form-filter input-sm" name="send_date_to" dp placeholder="到" type="text" >
                                        </th>
                                        <th>
                                            <div class="btn-group">
                                                <a class="btn btn-xs filter-submit btn-default"><i class="fa fa-search"></i> 搜索</a>
                                                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle btn-xs" type="button"><i class="fa fa-angle-down"></i></button>
                                                <ul role="menu" class="dropdown-menu pull-right">
                                                    <li><a href="javascript:void(0);" class="filter-cancel">重置</a></li>
                                                </ul>
                                            </div>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="save-modal" class="modal fade modal_small" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"></h4>
            </div>
            <form action="<?php echo getUrl('find/attribute/save'); ?>" class="form-horizontal" id="save-category-form" method="post">
                <div class="modal-body">
<!--                    <div class="form-group">-->
<!--                        <label class="control-label col-md-2">信息分类<span class="required">*</span></label>-->
<!--                        <div class="col-md-9">-->
<!--                            <select class="form-control" name="category_id" data-placeholder="请选择分类">-->
<!--                                --><?php //foreach ($category as $k => $v):?>
<!--                                    <option value="--><?php //echo $v['id']?><!--" selected>--><?php //echo $v['name']?><!--</option>-->
<!--                                --><?php //endforeach;?>
<!--                            </select>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label class="control-label col-md-2">属性名称<span class="required">*</span></label>
                        <div class="col-md-9">
                            <input name="attr_name" class="form-control required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">属性类型<span class="required">*</span></label>
                        <div class="col-md-9">
                            <select class="form-control" name="attr_input_type" data-placeholder="请选择属性类型">
                                <?php foreach ($type as $k => $v):?>
                                    <option value="<?php echo $k?>"><?php echo $v?></option>
                                <?php endforeach;?>
                            </select>
                        </div>
                        <a href="javascript:void(0);" class="plus-btn hide"><i class="fa fa-plus"></i> 添加</a>
                    </div>
                    <div class="form-group attr_values hide">
                        <label class="control-label col-md-2">选择输入值<span class="required">*</span></label>
                        <div class="col-md-9 val-box">
                            <div class="val-div">
                                <input name="attr_values[]" class="form-control vl" />
                                <a href="javascript:void(0);" class="delete"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="id" value=""/>
                    <input type="hidden" name="attribute_category_id" value="<?php echo $info['id'];?>"/>
                    <button class="btn default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i> 关闭</button>
                    <button type="submit" class="btn green field-submit-btn"><i class="fa fa-save"></i> 保存</button>
                    <script type="text/javascript">
                        $(function(){
                            var model = $('#save-modal');

                            $('.add').live('click', function(){
                                model.find('.modal-title').html('新增属性');
                                model.find('.has-error').removeClass('has-error').find('.validate_message').remove();
                                model.find('.show_message_error').remove();
                                model.find("input").not("[name='attribute_category_id']").val('');
                                model.find("[name='attr_input_type']").val('');
                                $('select').select2();
                                model.find(".plus-btn").addClass('hide');
                                model.find('.val-box').html(
                                    '<div class="val-div">'+
                                    '<input name="attr_values[]" class="form-control vl" />'+
                                    '<a href="javascript:void(0);" class="delete"><i class="fa fa-times"></i></a>'+
                                    '</div>'
                                );
                                $(".val-box").parents('.attr_values ').addClass('hide');
                                model.modal();
                            });

                            $('.edit-btn').live('click', function(){
                                var url = '<?php echo getUrl("find/attribute/getInfo")?>';
                                var id = $(this).attr('data-id');
                                l_blockUI();
                                $.post(url,{id:id},function(data){
                                    var data = data.data;
                                    model.find('.modal-title').html('编辑属性 - '+data.attr_name);
                                    model.find('.has-error').removeClass('has-error').find('.validate_message').remove();
                                    model.find('.show_message_error').remove();
                                    for (var k in data){
                                        model.find("[name='"+k+"']").val(data[k]);
                                    }

                                    if (data.attr_input_type == 3){
                                        model.find(".plus-btn").removeClass('hide');
                                        var html = '';
                                        $.each(data.attr_values,function (key,obj) {
                                            html += '<div class="val-div">'+
                                                '<input name="attr_values[]" class="form-control vl" value="'+obj+'"/>'+
                                                '<a href="javascript:void(0);" class="delete"><i class="fa fa-times"></i></a>'+
                                                '</div>';
                                        });
                                        $(".val-box").html(html);
                                        $(".val-box").parents('.attr_values ').removeClass('hide');
                                    }
                                    $('select').select2();
                                    App.unblockUI();
                                    model.modal();
                                }, 'json');

                                return false;
                            });


                            $.e_validate.init('.form-horizontal',{modal:model,ignore:''});

                            /**
                             * 属性类型
                             */
                            $("[name='attr_input_type']").live('change',function () {
                                var vl = $(this).val();
                                if (vl == 3){
                                    $(".attr_values").removeClass('hide');
                                    $(".plus-btn").removeClass('hide');
                                }else{
                                    $(".attr_values").addClass('hide');
                                    $(".plus-btn").addClass('hide');
                                }
                            });

                            /**
                             * 添加
                             */
                            $(".plus-btn").click(function () {
                                var len = $(".val-box").find('.val-div').length;
                                if(len > 0) {
                                    var vl = $(".val-box").find('.val-div').find('.vl').eq(len - 1).val();
                                    if (!vl.length) {
                                        show_modal_message({
                                            status: 0,
                                            message: "请完成上一个信息的填写"
                                        }, model.find('.modal-body'));
                                        return false;
                                    }
                                }
                                var html = '<div class="val-div">'+
                                    '<input name="attr_values[]" class="form-control vl" />'+
                                    '<a href="javascript:void(0);" class="delete"><i class="fa fa-times"></i></a>'+
                                    '</div>';
                                $(".val-box").append(html);
                            });

                            /**
                             * 删除
                             */
                            $(".delete").live('click',function () {
                                $(this).parents('.val-div').remove();
                            })
                        });
                    </script>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        datatable_init({
            src: $("#datatable"),
            sAjaxSource: "<?php echo getUrl('find/attribute/getList?id='.$info['id']);?>",
            aoColumnDefs : [{
                'bSortable' : false,
                'aTargets' : [0,1,2,4]
            }]
        });

        $('[dp]').not("[noinit]").datepicker({
            changeMonth: true,
            autoclose: true,
            format: "yyyy-mm-dd",
            language: 'zh-CN'
        });

        $('select').select2();
    });
</script>
</body>
</html>